<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="img/icon.jpg">
<!--<link rel="stylesheet" type="text/css" href="css/twen.css"/>-->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<title>twen</title>
<style type="text/css">
body {
  padding: 0px;
  margin: 0px;
  background-image: url(img/bg.jpg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#ul1 {width: 800px; height: 400px; margin: 10px auto; overflow: hidden; }
#ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none; overflow: hidden; filter:alpha(opacity:0); opacity: 0; }
p {
  font: 200 18px/1.8 'Optima','Songti SC','Verdana','Microsoft Yahei',simsun,serif;
  cursor: default;
}
.navbar-inverse {
  /*background: rgba(0, 0, 0, 0.8);*/
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 6px black;
  -moz-box-shadow: 0 2px 6px black;
  box-shadow: 0 2px 6px black;
}

.navbar-wrapper {
  margin: auto;
  position: fixed;
  top: 0;
  left: 5%;
  right: 5%;
  z-index: 99;
}
.padding-card {
  background: rgba(255, 255, 255, 0.7);
}
#worry{
  position: relative;
  top: 58px;
  width: 90%;
  margin: 0 auto;
  border-radius: 6px;
  text-align: center;
}

</style>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/move3.js"></script>
<script type="text/javascript">
window.onload=function()
{
  var oBtn=document.getElementById('btn1');
  var oUl=document.getElementById('ul1');
  var oTxt=document.getElementById('txt1');
  oBtn.onclick=function()
  {
    var oLi=document.createElement('li');
    oLi.innerHTML=oTxt.value;
    oTxt.value='';
    if(oUl.children.length>0)
    {
      oUl.insertBefore(oLi, oUl.children[0]);
    }
    else
    {
      oUl.appendChild(oLi);
    }
    //运动
    var iHeight=oLi.offsetHeight;
    oLi.style.height='0';
    startMove(oLi, {height: iHeight}, function(){
      startMove(oLi, {opacity:100});
    });

  };
};
</script>
</head>

<body>
<nav class="navbar-wrapper">
  <div class="navbar-inverse">
    <div class="container">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="#"><img src="img/twenwords.png"></a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="index.html">主页</a></li>
          <li class="active"><a href="#">留言板</a></li>
       <!--   <li><a href="#contact">Contact</a></li>-->
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">联系我<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="dropdown-header">邮箱</li>
              <li><a href="https://mail.qq.com/" target="_blank">+joneyee22@qq.com</a></li>
               <li class="divider"></li>
              <li class="dropdown-header">LOFTER</li>
              <li><a href="http://twentwo.lofter.com/" target="_blank">@twen_Yee</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">微博</li>
              <li><a href="http://weibo.com/coyee/" target="_blank">@twen_Yee</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">微信</li>
              <li><a href="https://wx.qq.com/" target="_blank">@twen_Yee</a></li>
            </ul>
          </li>
          <li><a href="" data-toggle="modal" data-target="#myModal">关于</a></li>
        </ul>
      </div>  
    </div>
  </div>
</nav>


<!--[if lt IE 9]>
    <div class="alert alert-warning alert-dismissable" id="worry">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <h3>浏览器版本过低</h3>
        <br>
        <p>你知道吗？你的浏览器略渣！这个网页上的有很多好看的东西和动画效果都显示不了！</p>
        <p>建议<a href="http://windows.microsoft.com/zh-cn/internet-explorer/downloads/ie-10/worldwide-languages" target="_blank">升级</a>你的浏览器或使用 <a href="http://www.google.com/intl/zh-CN/chrome/browser/" target="_blank">Chrome</a> 或 <a href="http://www.firefox.com.cn/" target="_blank">Firefox</a> 等高级浏览器。</p>
    </div>
<![endif]-->

<div style="padding-top:100px;">
<textarea id="txt1" rows="4" cols="40" class="form-control" style="width:60%;margin:auto;"></textarea>
<a id="btn1" type="button" class="btn btn-primary" style="margin-left:72%;margin-top:4px;">发布</a></div>
<ul id="ul1" class="form-control padding-card "></ul>

<p style="text-align:center;">Copyright © 2013.11 Designed and Developed by twen_Yee. All Rights Reserved.</p> 

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title" id="myModalLabel">关于</h2>
      </div>
      <div class="modal-body">
        <p>1.运用Html5。使用了支持响应式的 Bootstrap 框架构建。<br>2.由于Bootstrap引入了jQuery，在网页中增加了jplayer的jQuery插件用于播放音乐。<br>3.为了减少包的大小，网页中的音乐使用外链，可能会失效。<br>4.部分效果运用强大的CSS3，部分运动使用已引入的jQuery,部分组件来自于Bootstrap。
          <br>5.留言板用纯js实现，并不能保存数据，仅仅是示例。</p>      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>